<template>
	<view>
		<view>
			<!-- <uni-card style="" v-for="item in pendingApproList" :key="item.id" :title="item.applyNo"
				@click="toDetail(item)" :extra="item.className">
				<view style="display: flex; padding: 40rpx 20rpx;">
					<image style="width:200rpx; height: 250rpx;"
						:src="item.studentImg !=''? item.studentImg:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
						@click.stop="clickImg(item.studentImg)" mode=""></image>
					<view class="" style="font-size: 24rpx; margin-left: 60rpx; width: 280rpx;">
						<view>学生姓名：{{item.studentName}}</view>
						<view>班级：{{item.className}}</view>
						<view>违纪类型详情：{{item.violationTypeDetail}}</view>
						<view style="font-size: 20rpx;">提交时间：{{item.createTime}}</view>
						<view style="display: flex;">申请单状态：
							<view v-if="item.applyStatus == 0"><text>申请被驳回</text></view>
							<view v-if="item.applyStatus == 1" style="color: #fe0000;"><text>处理中</text></view>
							<view v-if="item.applyStatus == 2"><text>申请被撤回</text></view>
							<view v-if="item.applyStatus == 10"><text style="color: green;">已处理</text></view>
						</view>
					</view>
				</view>
				<view v-if="item.applyStatus == 1" style="padding: 20rpx 0;">
					<view class="button" @click.stop="cancel(item)">撤 销</view>
				</view>
			</uni-card> -->
			<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
				<view v-if="current == 0">
					<uni-card style="" v-for="item in pendingApproList" :key="item.id" :title="item.applyNo"
						@click="toDetail(item)" :extra="item.className">
						<view style="display: flex; padding: 40rpx 20rpx;">
							<image style="width:200rpx; height: 250rpx;"
								:src="item.studentImg !=''? item.studentImg:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
								@click.stop="clickImg(item.studentImg)" mode=""></image>
							<view class="" style="font-size: 24rpx; margin-left: 60rpx; width: 280rpx;">
								<view>学生姓名：{{item.studentName}}</view>
								<view>班级：{{item.className}}</view>
								<view>违纪类型详情：{{item.violationTypeDetail}}</view>
								<view style="font-size: 20rpx;">提交时间：{{item.createTime}}</view>
								<view style="display: flex;">申请单状态：
									<view v-if="item.applyStatus == 0"><text>申请被驳回</text></view>
									<view v-if="item.applyStatus == 1" style="color: #fe0000;"><text>处理中</text></view>
									<view v-if="item.applyStatus == 2"><text>申请被撤回</text></view>
									<view v-if="item.applyStatus == 10"><text style="color: green;">已处理</text></view>
								</view>
							</view>
						</view>
						<view v-if="item.applyStatus == 1" style="padding: 20rpx 0;">
							<view class="button" @click.stop="cancel(item)">撤 销</view>
						</view>
					</uni-card>
					<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="pendingApproList.length <= 0">
						<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
					</view>
				</view>
				
				<view v-if="current == 1">
					<uni-card style="" v-for="item in processedApproList" :key="item.id" :title="item.applyNo"
						@click="toDetail(item)" :extra="item.className">
						<view style="display: flex; padding: 40rpx 20rpx;">
							<image style="width:200rpx; height: 250rpx;"
								:src="item.studentImg !=''? item.studentImg:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
								@click.stop="clickImg(item.studentImg)" mode=""></image>
							<view class="" style="font-size: 24rpx; margin-left: 60rpx; width: 280rpx;">
								<view>学生姓名：{{item.studentName}}</view>
								<view>班级：{{item.className}}</view>
								<view>违纪类型详情：{{item.violationTypeDetail}}</view>
								<view style="font-size: 20rpx;">提交时间：{{item.createTime}}</view>
								<view style="display: flex;">申请单状态：
									<view v-if="item.applyStatus == 0"><text>申请被驳回</text></view>
									<view v-if="item.applyStatus == 1" style="color: #fe0000;"><text>处理中</text></view>
									<view v-if="item.applyStatus == 2"><text>申请被撤回</text></view>
									<view v-if="item.applyStatus == 10"><text style="color: green;">已处理</text></view>
								</view>
							</view>
						</view>
						<view v-if="item.applyStatus == 1" style="padding: 20rpx 0;">
							<view class="button" @click.stop="cancel(item)">撤 销</view>
						</view>
					</uni-card>
				
					<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="processedApproList.length <= 0">
						<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
					</view>
				</view>
			
		</view>
	</view>
</template>

<script>
	import managementTeacher from "@/api/modules/managementTeacher.js"
	// import violations from "@/api/modules/violations.js"
	import violations from "@/api/modules/violation.js"
	import {parseTime} from "@/utils/date.js"
	export default {
		data() {
			return {
				processedQueryParams: {
								pageSize: 10,
								pageNum: 1
							},
				// 分段器
				items: ['待处理列表', '已完成处理列表', ],
				current: 0,
				processedApproList: [],
				tempProcessedAppros: [],
				topName: "我提交的违纪",
				userName: "",
				queryParams: {
					pageSize: 10,
					pageNum: 1,
				},
				// 表单数据
				pendingApproList: [],
				tempPendingAppros: [],
				// 表单数据
				formData: {
					sdId: "",
					studentId: "",
					notReturnedDate: "",
					studentImg: "",
					teacherName: "",
					className: "",
					reason: "",
				},
				// 宿舍号列表
				dorNoList: [],
				// 学生列表
				studentList: [],
				// 学生信息显示
				studentShow: false,
				// 班级id
				classId: "",
				// 表单校验
				rules: {
					sdId: {
						rules: [{
							required: true,
							errorMessage: '宿舍号不能为空'
						}]
					},
					studentId: {
						rules: [{
							required: true,
							errorMessage: '学生不能为空'
						}]
					},
					notReturnedDate: {
						rules: [{
							required: true,
							errorMessage: '未归寝日期不能为空'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '未归寝原因不能为空'
						}]
					},
				},
			}
		},
		onReachBottom() {
			if(this.current == 0) {
				this.queryParams.type = "1"
				this.queryParams.createBy = this.userName
				this.queryParams.pageNum += 1
				violations.getPagelist(this.queryParams).then(res => {
					this.tempPendingAppros = res.data.list
					if(this.tempPendingAppros.length === 0) {
						console.log(this.queryParams.pageNum)
						this.queryParams.pageNum -= 1
						console.log(this.queryParams.pageNum)
						return
					}
					this.tempPendingAppros.forEach(item => {
						item.createTime = parseTime(item.createTime)
						if (item.studentImg == null) {
							item.studentImg = "https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png"
						}
					})
					this.pendingApproList = [...this.pendingApproList, ...this.tempPendingAppros]
				})
				this.tempPendingAppros = []
				this.$forceUpdate()
			}
			
			if(this.current == 1) {
				this.processedQueryParams.type = "1"
				this.processedQueryParams.createBy = this.userName
				this.processedQueryParams.pageNum += 1
				violations.getProcessedPageList(this.processedQueryParams).then(res => {
					this.tempProcessedAppros = res.data.list
					if(this.tempProcessedAppros.length === 0) {
						console.log(this.processedQueryParams.pageNum)
						this.processedQueryParams.pageNum -= 1
						console.log(this.processedQueryParams.pageNum)
						return
					}
					this.tempProcessedAppros.forEach(item => {
						item.createTime = parseTime(item.createTime)
						if (item.studentImg == null) {
							item.studentImg = "https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png"
						}
					})
					this.processedApproList = [...this.processedApproList, ...this.tempProcessedAppros]
				})
				this.tempProcessedAppros = []
				this.$forceUpdate()
			}
		},
		methods: {
			// 分段器
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 获取已处理违纪单
			getProcessedPageList() {
				this.processedQueryParams.type = '1'
				this.processedQueryParams.createBy = this.userName
				violations.getProcessedPageList(this.processedQueryParams).then(res => {
					this.processedApproList = res.data.list
					this.processedApproList.forEach(item => {
						item.createTime = parseTime(item.createTime)
						if (item.studentImg == null) {
							item.studentImg = "https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png"
						}
					})
				})
			},
			toDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages_main/managementTeacher/violationDetail/violationDetail?item=${JSON.stringify(item)}&flag=9`
				})
			},
			// 图片预览
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 表单清空
			reset() {
				this.formData = {
					sdId: "",
					studentId: "",
					notReturnedDate: "",
					studentImg: "",
					teacherName: "",
					className: "",
					reason: "",
				}
				this.classId = ""
			},
			// 获取申请单列表
			getPageList() {
				this.queryParams.type = "1"
				this.queryParams.createBy = this.userName
				violations.getPagelist(this.queryParams).then(res => {
					this.pendingApproList = res.data.list
					this.pendingApproList.forEach(item => {
						item.createTime = parseTime(item.createTime)
						if (item.studentImg == null) {
							item.studentImg = "https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png"
						}
					})
					console.log(this.pendingApproList)
				})
			},
			toggle() {
				this.$refs.popup.open()
			},
			// 获取所有宿舍号
			getAppDormitoryList() {
				managementTeacher.getAppDormitoryList().then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.text = item.buildingNo + item.dormitoryNo
						obj.value = item.bdormitoryId
						this.dorNoList.push(obj)
					})
				})
			},
			checkDate(e) {
				console.log()
			},
			// 选择宿舍号
			checkDorNo(e) {
				this.formData.studentId = ""
				this.studentShow = false
				if (e) {
					this.getStudentByDormitoryId()
				}
			},
			// 根据宿舍号查学生列表
			getStudentByDormitoryId() {
				managementTeacher.getStudentByDormitoryId(this.formData.sdId).then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.text = item.studentName
						obj.value = item.id
						this.studentList.push(obj)
					})
				})
			},
			// 拿到学生信息
			checkStudent(e) {
				this.studentShow = true
				managementTeacher.getStudentById(e).then(res => {
					this.formData.studentImg = res.data.stuPhoto
					this.formData.className = res.data.className
					this.classId = res.data.classId
					this.formData.teacherName = res.data.teacherName
				})
			},
			// 撤销申请
			cancel(item) {
				this.queryParams.pageNum = 1
				
				uni.showModal({
					content: '是否确认撤销申请',
					success: (res) => {
						if (res.confirm) {
							violations.cancelApply({
								processInstanceId: item.processInstanceId
							}).then(res => {
								uni.showToast({
									title: "撤销成功"
								})
								this.getPageList()
							})
						} else if (res.cancel) {}
					}
				});
			},
			closePopup() {
				this.reset()
				this.studentShow = false
				this.$refs.popup.close()
			}
		},
		onLoad() {
			this.userName = uni.getStorageSync("userName")
			this.getAppDormitoryList()
			this.getPageList()
			this.getProcessedPageList()
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	.button {
		width: 50%;
		background-color: #22ad38;
		color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 36rpx;
		margin: 0 auto;
	}
</style>